import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:getwidget/getwidget.dart';
import 'package:meal/constant/antd_icons.dart';
import 'package:meal/constant/fonts.dart';
import 'package:meal/constant/sizes.dart';
import 'package:meal/model/product.dart';
import 'package:meal/model/tree_menu.dart';
import 'package:meal/route/route.dart';
import 'package:meal/utils/colors.dart';
import 'package:meal/utils/styles.dart';

///
/// 在售
///
class OnSale extends StatefulWidget {
  const OnSale({Key? key}) : super(key: key);

  @override
  State<OnSale> createState() => _OnSaleState();
}

class _OnSaleState extends State<OnSale> {
  List<TreeMenu> menus = [];

  int findex = 0;

  late ScrollController firstController;

  @override
  void initState() {
    super.initState();
    firstController = ScrollController();
    menus.add(TreeMenu<ProductModel>(name: '石磨肠粉', children: [
      TreeMenu<ProductModel>(
          entity: ProductModel(
              imgUrl:
                  'https://gw.alicdn.com/imgextra/i1/2939922051/O1CN01kPFaY01R1P6vrXVlN_!!2939922051.jpg_Q75.jpg_.webp',
              name: 'A101 河村石磨肠粉(双蛋双蛋)',
              monthSale: 5,
              inventory: 50,
              tags: ['单点不送'],
              actualPrice: 80,
              classify: ProductClassifyEnum.news,
              mark: ProductMarkEnum.expire)),
      TreeMenu<ProductModel>(
          entity: ProductModel(
              imgUrl:
                  'https://gw.alicdn.com/imgextra/i1/2939922051/O1CN01kPFaY01R1P6vrXVlN_!!2939922051.jpg_Q75.jpg_.webp',
              name: 'A101 河村石磨肠粉(双蛋双蛋)',
              monthSale: 5,
              inventory: 50,
              actualPrice: 80,
              salePrice: 100,
              classify: ProductClassifyEnum.signboard,
              meal: true)),
      TreeMenu<ProductModel>(
          entity: ProductModel(
              imgUrl:
                  'https://gw.alicdn.com/imgextra/i1/2939922051/O1CN01kPFaY01R1P6vrXVlN_!!2939922051.jpg_Q75.jpg_.webp',
              name: 'A101 河村石磨肠粉(双蛋双蛋)',
              monthSale: 5,
              inventory: 50,
              actualPrice: 80,
              mark: ProductMarkEnum.review)),
      TreeMenu<ProductModel>(
          entity: ProductModel(
              imgUrl:
                  'https://gw.alicdn.com/imgextra/i1/2939922051/O1CN01kPFaY01R1P6vrXVlN_!!2939922051.jpg_Q75.jpg_.webp',
              name: 'A101 河村石磨肠粉(双蛋双蛋)',
              monthSale: 5,
              inventory: 50,
              actualPrice: 80,
              introduce: '每日11:00-13:00开售',
              mark: ProductMarkEnum.noSale)),
      TreeMenu<ProductModel>(
          entity: ProductModel(
              imgUrl:
                  'https://gw.alicdn.com/imgextra/i1/2939922051/O1CN01kPFaY01R1P6vrXVlN_!!2939922051.jpg_Q75.jpg_.webp',
              name: 'A101 河村石磨肠粉(双蛋双蛋)',
              monthSale: 5,
              inventory: 50,
              introduce: '每月限时10份')),
    ]));
    menus.add(TreeMenu(name: '面食小吃'));
    menus.add(TreeMenu(name: '粥食小吃'));
    firstController.addListener(() {
      int index = firstController.offset ~/ Sizes.default50;
      if (index != findex) {
        findex = index;
        setState(() {});
      }
    });
  }

  @override
  void dispose() {
    super.dispose();
    firstController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        SizedBox(
          width: Sizes.default100,
          child: ListView.builder(
            itemBuilder: (BuildContext ctx, int index) {
              return InkWell(
                onTap: () {
                  setState(() {
                    findex = index;
                    firstController.animateTo(index * Sizes.default50,
                        duration: const Duration(milliseconds: 200), curve: Curves.linear);
                  });
                },
                child: Container(
                  padding: const EdgeInsets.only(left: Sizes.default15),
                  alignment: Alignment.centerLeft,
                  decoration: BoxDecoration(
                    color: findex == index ? Colors.white : Colors.transparent,
                  ),
                  child: Text(
                    '${menus[index].name}',
                    style: StylesUtils.customTextStyle(
                        color: findex == index ? ColorsUtils.colorFf6 : ColorsUtils.color333,
                        fontSize: Sizes.default15),
                  ),
                ),
              );
            },
            itemExtent: Sizes.default50,
            shrinkWrap: true,
            itemCount: menus.length,
            controller: firstController,
          ),
        ),
        Expanded(
            child: Container(
          decoration: const BoxDecoration(color: Colors.white),
          child: Column(
            children: [
              Container(
                height: Sizes.default25,
                alignment: Alignment.centerLeft,
                padding: const EdgeInsets.symmetric(horizontal: Sizes.default15),
                decoration: BoxDecoration(
                    color: ColorsUtils.rgba(247, 247, 247, 1),
                    borderRadius: BorderRadius.circular(Sizes.default5)),
                child: Text(
                  '${menus[findex].name}（${menus[findex].children.length}）',
                  style: StylesUtils.customTextStyle(
                      color: ColorsUtils.color797, fontSize: Sizes.default12),
                ),
              ),
              Expanded(
                child: ListView.builder(
                  itemBuilder: (BuildContext ctx, int index) {
                    var item = menus[findex].children[index];
                    var product = item.entity as ProductModel;
                    return InkWell(
                      onTap: () {
                        Get.toNamed(RouteGet.productInfo, arguments: product);
                      },
                      child: Container(
                        padding: const EdgeInsets.only(
                            left: Sizes.default10, top: Sizes.default10, bottom: Sizes.default10),
                        child: Row(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            SizedBox(
                              width: 70,
                              child: Stack(
                                children: [
                                  GFImageOverlay(
                                      width: Sizes.default70,
                                      height: Sizes.default70,
                                      image: NetworkImage(product.imgUrl),
                                      borderRadius: BorderRadius.circular(Sizes.default5)),
                                  if (product.mark != null)
                                    Positioned(
                                        height: 16,
                                        bottom: 0,
                                        left: 0,
                                        right: 0,
                                        child: Container(
                                          alignment: Alignment.center,
                                          decoration: BoxDecoration(
                                              color: ColorsUtils.parseColorFromHexString(
                                                  '${product.mark?.backgroundColor}'),
                                              borderRadius: const BorderRadius.only(
                                                  bottomLeft: Radius.circular(Sizes.default5),
                                                  bottomRight: Radius.circular(Sizes.default5))),
                                          child: Text(
                                            '${product.mark?.text}',
                                            style: StylesUtils.customTextStyle(
                                                fontSize: Sizes.default12,
                                                color: '${product.mark?.textColor}'),
                                          ),
                                        )),
                                  if (product.classify != null)
                                    Positioned(
                                        width: 30,
                                        height: 15,
                                        top: 0,
                                        left: 0,
                                        child: Container(
                                          constraints:
                                              const BoxConstraints.expand(width: 30, height: 15),
                                          alignment: Alignment.center,
                                          decoration: BoxDecoration(
                                              color: ColorsUtils.parseColorFromHexString(
                                                  '${product.classify?.backgroundColor}'),
                                              borderRadius: const BorderRadius.only(
                                                  topLeft: Radius.circular(Sizes.default5),
                                                  bottomRight: Radius.circular(Sizes.default5))),
                                          child: Text(
                                            '${product.classify?.text}',
                                            style: StylesUtils.customTextStyle(
                                                color: '${product.classify?.textColor}',
                                                fontSize: Sizes.default12),
                                          ),
                                        ))
                                ],
                              ),
                            ),
                            Expanded(
                                child: Container(
                              padding: const EdgeInsets.only(left: Sizes.default10),
                              child: Column(
                                children: [
                                  Container(
                                    alignment: Alignment.centerLeft,
                                    margin: const EdgeInsets.only(bottom: Sizes.default5),
                                    child: Text(
                                      product.name,
                                      style:
                                          StylesUtils.customTextStyle(color: ColorsUtils.color333),
                                      overflow: TextOverflow.ellipsis,
                                      maxLines: 1,
                                    ),
                                  ),
                                  if (product.introduce != null)
                                    Container(
                                      alignment: Alignment.centerLeft,
                                      margin: const EdgeInsets.only(bottom: Sizes.default5),
                                      child: Text(
                                        '${product.introduce}',
                                        style: StylesUtils.customTextStyle(
                                            fontSize: Sizes.default12, color: ColorsUtils.color999),
                                      ),
                                    ),
                                  Container(
                                    alignment: Alignment.centerLeft,
                                    margin: const EdgeInsets.only(bottom: Sizes.default5),
                                    child: Text(
                                      '月售 ${product.monthSale}',
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.color999, fontSize: Sizes.default12),
                                    ),
                                  ),
                                  Container(
                                      alignment: Alignment.centerLeft,
                                      margin: const EdgeInsets.only(bottom: Sizes.default5),
                                      child: Text.rich(TextSpan(
                                        children: [
                                          TextSpan(
                                            text: '库存 ${product.inventory}',
                                            style: StylesUtils.customTextStyle(
                                                color: ColorsUtils.color999,
                                                fontSize: Sizes.default12),
                                          ),
                                          WidgetSpan(
                                              child: Icon(
                                                AntdIcons.edit,
                                                color: ColorsUtils.parseColorFromHexString(
                                                    ColorsUtils.colorCcc),
                                                size: Sizes.default14,
                                              ),
                                              alignment: PlaceholderAlignment.middle)
                                        ],
                                      ))),
                                  if (product.tags.isNotEmpty)
                                    Container(
                                      alignment: Alignment.centerLeft,
                                      margin: const EdgeInsets.only(bottom: Sizes.default5),
                                      child: Wrap(
                                        spacing: Sizes.default5,
                                        children: product.tags
                                            .map((e) => Container(
                                                  constraints: const BoxConstraints(
                                                      maxWidth: 60, maxHeight: 18),
                                                  alignment: Alignment.center,
                                                  decoration: BoxDecoration(
                                                      border: Border.all(
                                                          color:
                                                              ColorsUtils.parseColorFromHexString(
                                                                  ColorsUtils.colorCcc)),
                                                      borderRadius:
                                                          BorderRadius.circular(Sizes.default3)),
                                                  child: Text(e,
                                                      style: StylesUtils.customTextStyle(
                                                          fontSize: Sizes.default12,
                                                          color: ColorsUtils.color333)),
                                                ))
                                            .toList(),
                                      ),
                                    ),
                                  if (product.actualPrice != null)
                                    Container(
                                      alignment: Alignment.centerLeft,
                                      margin: const EdgeInsets.only(bottom: Sizes.default5),
                                      child: Wrap(
                                        spacing: Sizes.default10,
                                        children: [
                                          Text(
                                            '₱${product.actualPrice}',
                                            style: StylesUtils.customTextStyle(
                                                fontSize: Sizes.default15,
                                                color: ColorsUtils.colorCc0),
                                          ),
                                          if (product.salePrice != null)
                                            Text(
                                              '${product.salePrice}',
                                              style: TextStyle(
                                                  fontSize: 13,
                                                  decoration: TextDecoration.lineThrough,
                                                  decorationStyle: TextDecorationStyle.solid,
                                                  decorationColor:
                                                      ColorsUtils.parseColorFromHexString(
                                                          ColorsUtils.colorCcc),
                                                  color: ColorsUtils.parseColorFromHexString(
                                                      ColorsUtils.colorCcc),
                                                  fontWeight: FontWeight.normal,
                                                  fontFamily: Fonts.yaHei,
                                                  letterSpacing: 1),
                                            ),
                                        ],
                                      ),
                                    )
                                ],
                              ),
                            ))
                          ],
                        ),
                      ),
                    );
                  },
                  itemCount: menus[findex].children.length,
                  shrinkWrap: true,
                ),
              )
            ],
          ),
        ))
      ],
    );
  }
}
